<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card style="width:500px;height: 600px;margin-left: 50px;">
          <el-tree
            :data="cate"
            accordion
            :highlight-current=true
            @node-click="choseNode"
            :check-on-click-node=true>

          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="6">
        <div style=" margin-left: 100px;width:300px;height: 500px;">
          <el-button type="primary" @click="addRoot">添加根目录</el-button>
          <br>
          <br>
          <!--选中根后才显示-->
          <el-button type="primary" @click="addNew" v-if="itemCate.cid && itemCate.level ===2">新增类目</el-button>
          <br>
          <br>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card style="width:500px;height: 600px;padding-left: 50px;">
          <el-form>
            <el-form-item label="类目名称">
              <el-input v-model="itemCate.cateName"></el-input>
            </el-form-item>
            <el-form-item label="权重">
              <el-input v-model="itemCate.weight"></el-input>
            </el-form-item>
            <!--只有子节点才显示-->
            <el-form-item label="图片" v-if="itemCate.level ===1">
              <lazy-img-upload @onSuccess="img"
                               beforeClass="cateUpdate"
                               afterClass="cateUpdate"
                               quality="50"
                               resize-width="80"
                               :background-img="itemCate.imgUrl">
              </lazy-img-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveCate">保存</el-button>
              <!--存在主键才显示-->
              <el-button type="dangerous" v-if="itemCate.cid" @click="doDelete">删除</el-button>
            </el-form-item>
          </el-form>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, selMainCate, modifyCate, addCate, deleteCate} from "../../data/service";

  export default {
    name: "",
    data() {
      return {
        cate: [],
        children: [],
        itemCate: {
          parentCid : -1
        },
      }
    },
    created() {
      this.getMainCate();
    },
    mixins: [ajax],
    methods: {
      getMainCate() {
        this.doajax(selMainCate, {}, resp => {
          this.cate = resp.data;
        });
      },
      choseNode(nodeObj) {
        // let obj = nodeObj;
        // this.itemCate.level = nodeObj.level;
        // this.itemCate.parentCid = nodeObj.parentCid;
        // this.itemCate.weight = nodeObj.weight;
        // this.itemCate.cateName = nodeObj.cateName;
        // this.itemCate.imgUrl = nodeObj.imgUrl;
        // this.itemCate.cid = nodeObj.cid;
        this.itemCate = nodeObj;
      },
      img(url) {
        this.itemCate.imgUrl = url;
      },
      initCate() {
        this.itemCate = {
          parentCid :-1
        };
      },
      addRoot() {
        this.initCate();
        this.itemCate.level = 2;
        this.itemCate.parentCid = -1;
      },
      addNew(){
       //根据当前选择节点判断
        if(this.itemCate.level ===2){
          let c = this.itemCate.cid;
          this.initCate();
          this.itemCate.level = 1;
          this.itemCate.parentCid = c;
        }
      },
      saveCate() {
        let method = this.itemCate.cid ? modifyCate : addCate;
        let param = {
          parentCid : this.itemCate.parentCid,
          weight :this.itemCate.weight,
          imgUrl :this.itemCate.imgUrl,
          cid:this.itemCate.cid,
          cateName :this.itemCate.cateName
        };
        this.doajax(method, param,
          resp => {
          this.success("保存成功");
          this.initCate();
          this.getMainCate();
        });
      },
      doDelete(){
        this.$confirm('确定下架吗?', '下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.doajax(deleteCate,{cid:this.itemCate.cid},resp=>{
            this.success("删除成功");
            this.initCate();
            this.getMainCate();
          })
        }).catch(() => {

        });
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .cateUpdate > img {
    width: 200px !important;
    height: 200px !important;
  }
</style>

